上一篇我們聊了 Vue2 與 Vue3 的差別，這篇我們就來聊聊「Vue 的基本語法」吧！我們現在就真的要來進入語法的部分了。

插值語法（Interpolation）

在 Vue 裡面，如果開發者想要在網頁上顯示變數的值，我們會使用 {{ }} 這個插值語法。這個用法應該算是 Vue 裡最常見的語法了。

<template>
  <h1>你好，{{ name }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const name = ref('鐵人賽')
</script>

到這邊應該還算簡單吧XD，這段的意思就是宣個一個變數叫做 name，而這個name的值是「鐵人賽」，然後在前端進行渲染。

表達式（Expression）

插值語法除了顯示單純的變數，還可以直接運算。舉個例子，假設我們有兩個數字變數：

<template>
  <p>結果是：{{ num1 + num2 }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const num1 = ref(10)
const num2 = ref(20)
</script>

這樣畫面就會顯示「結果是：30」。
開發者可以直接在 {{ }} 裡面寫加減乘除、字串拼接等等的小運算。

簡單互動

如果我們想要在畫面上顯示變數，並且可以手動更改，該怎麼做呢？最簡單的方式，就是改變變數的值，再用插值語法顯示。

<template>
  <h1>{{ title }}</h1>
  <button @click="changeTitle">改變文字</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const title = ref('哈囉 Vue!')

function changeTitle() {
  title.value = '我愛鐵人賽'
}
</script>

這裡我們建立了一個變數 title，一開始顯示「哈囉 Vue!」。當使用者按下按鈕時，會觸發 changeTitle()，把值改成「我愛鐵人賽」。然後畫面就會馬上更新。

這就是 Vue 最強大的地方之一 —— 資料跟畫面是連動的，我們下一節就會講到「資料綁定」的部分，會加強這一塊的觀念。

練習：計數器

讀者可以自己動手試試看，做一個「計數器」。一開始數字是 0，然後畫面上有一個按鈕，每次按下去數字就會加 1。

提示：

• 先用 ref(0) 建立一個數字變數
• 用 {{ count }} 把它顯示到畫面上
• 按鈕 @click 的時候，讓 count.value++

答案

<template>
  <div>
    <h1>計數器：{{ count }}</h1>
    <button @click="increment">點我 +1</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<style>
h1 {
  color: #333;
  text-align: center;
}
button {
  display: block;
  margin: 10px auto;
  padding: 8px 16px;
  border: none;
  background-color: #42b883;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #2c8f6e;
}
</style>

style 我們就不看了，我們直接來看邏輯的部分，我們宣告了一個變數 count，其初始值為 0。我們定應了一個 function 叫做 increment，他可以將剛剛定義的 count 的值加上 1 再賦值回去。
再來我們在前端渲染的部分，放上了一個按鈕，當使用者按下去時，就會觸發 increment() 這個函數，使得 count 值就會加 1。然後顯示在 h1 大標題上。

本文結尾

今天我們真的進入到 Vue 的「最基礎語法」了：插值、表達式，還有最簡單的互動。這些都是後面進階功能的基礎，讀者一定要熟悉，因為所有的 Vue 專案，最終都還是圍繞在「資料」跟「畫面」如何同步。相信讀者都對這些有個初步的概念了，下一篇我們就會開始細部講到「資料綁定」的部分。